<template>
    <div class="footer-container">
        <!-- 全选区域 -->
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="fullCheck" :checked="isfull"
                @click="onCheckBoxChange">
            <label class="custom-control-label" for="fullCheck">全选</label>
        </div>
        <!--合计区域  -->
        <div>
            <span>合计:</span>
            <span class="amout">￥{{ amout.toFixed(2) }}</span>
        </div>
        <!-- 购买按钮 -->
        <button type="button" class="btn btn-primary btn-settle" :disabled="total === 0">结算({{ total
        }})</button>
    </div>
</template>

<script>
export default {
    name: "EsFooter",
    emits: ["fullChange"],
    props: {
        // 总价格
        amout: {
            type: Number,
            default: 0
        },
        // 总数量
        total: {
            type: Number,
            default: 0
        },
        // 全选按钮的状态
        isfull: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        // 监听选中的状态
        onCheckBoxChange(e) {
            const val = e.target.checked;
            // 把值传递出去给app组件
            this.$emit("fullChange", val)
        }
    }
}
</script>

<style lang="less" scoped>
.footer-container {
    // 底部固定定位
    position: fixed;
    bottom: 0;
    left: 0;
    // 内部元素两边水平垂直居中
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 设置背景颜色和顶边框的颜色
    background-color: #fff;
    border-top: 2px solid #c6c1c1eb;
    // 设置宽高
    width: 100%;
    height: 50px;
    z-index: 999;
    // 设置内边距
    padding: 0 10px;
}

.amout {
    color: red;
    font-weight: bold;
}

.btn-settle {
    min-width: 90px;
    height: 38px;
    border-radius: 19px;
}
</style>